import React from 'react';
import { Layout } from 'antd';
import {
  TeamOutlined,
  TableOutlined,
  ShoppingCartOutlined,
  AppstoreOutlined,
  OrderedListOutlined,
  SettingOutlined,
  ExperimentOutlined,
  BarChartOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Card } from '../../components/common/Card';
import './DashboardPage.css';

const { Content } = Layout;

export const DashboardPage: React.FC = () => {
  const navigate = useNavigate();

  const featureCards = [
    {
      key: 'data-overview',
      icon: <BarChartOutlined />,
      title: '数据概览',
      description: '营业数据分析、图表展示和趋势分析',
      onClick: () => navigate('/data-overview'),
      colorClass: 'blue',
      category: 'management'
    },
    {
      key: 'order-station',
      icon: <ShoppingCartOutlined />,
      title: '点餐台',
      description: '快速下单、管理订单',
      onClick: () => navigate('/order-station'),
      colorClass: 'orange',
      category: 'primary'
    },
    {
      key: 'orders',
      icon: <OrderedListOutlined />,
      title: '订单管理',
      description: '查看所有订单、订单状态和历史记录',
      onClick: () => navigate('/orders'),
      colorClass: 'blue',
      category: 'primary'
    },
    {
      key: 'tables',
      icon: <TableOutlined />,
      title: '餐桌管理',
      description: '管理餐厅餐桌、预订和状态',
      onClick: () => navigate('/tables'),
      colorClass: 'green',
      category: 'management'
    },
    {
      key: 'members',
      icon: <TeamOutlined />,
      title: '会员管理',
      description: '管理会员信息、消费记录和积分',
      onClick: () => navigate('/users'),
      colorClass: 'purple',
      category: 'management'
    },
    {
      key: 'products',
      icon: <AppstoreOutlined />,
      title: '商品管理',
      description: '管理商品信息、分类和属性',
      onClick: () => navigate('/products'),
      colorClass: 'indigo',
      category: 'management'
    },

    {
      key: 'lab',
      icon: <ExperimentOutlined />,
      title: '实验室',
      description: '酒单生成、数据分析等实验性功能',
      onClick: () => navigate('/lab'),
      colorClass: 'cyan',
      category: 'lab'
    },
    {
      key: 'app-config',
      icon: <SettingOutlined />,
      title: '小程序配置',
      description: '管理微信小程序的基础配置信息',
      onClick: () => navigate('/app-config'),
      colorClass: 'gray',
      category: 'settings'
    }
  ];

  return (
    <Layout className="dashboard-layout">
      <Content className="dashboard-content">
        <div className="dashboard-container">
          <div className="dashboard-grid">
            {featureCards.map(card => (
              <Card
                key={card.key}
                onClick={card.onClick}
                className={`feature-card feature-card-${card.colorClass}`}
              >
                <div className="card-content">
                  <div className={`card-icon icon-${card.colorClass}`}>
                    {card.icon}
                  </div>
                  <div className="card-text">
                    <h3 className="card-title">{card.title}</h3>
                    <p className="card-description">{card.description}</p>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </Content>
    </Layout>
  );
};

export default DashboardPage; 